<template>
  <div>
    <XtxDialog
      :visible="showDialog"
      title="我是外来的title"
      @close="handleClose"
    >
      <template #default>
        我是外面的内容
        <p>我是个p</p>
        <h2>我是个h2</h2>
      </template>
      <template #footer>
        <XtxButton type="gray" style="margin-right: 20px">取消</XtxButton>
        <XtxButton type="primary">确认</XtxButton>
        <!-- <h2>我就是个footer</h2> -->
      </template>
    </XtxDialog>

    <button @click="showDialog = true">显示dialog</button>
    <Box1></Box1>
    <Box2></Box2>
  </div>
  <Suspense>
    <!-- 跟 v-if   v-else   没啥区别 -->
    <template #default>
      <Box1 />
    </template>
    <template #fallback>
      <h1>Loading !...</h1>
    </template>
  </Suspense>
</template>

<script>
import Box1 from './components/Box1.vue'
// import Box2 from './components/Box2.vue'
import { ref } from 'vue'
export default {
  components: {
    Box1
    // Box2
  },
  setup () {
    const showDialog = ref(false)
    const handleClose = (flag) => {
      console.log(flag)
      showDialog.value = flag
    }
    return {
      showDialog,
      handleClose
    }
  }
}
</script>

<style>
</style>
